<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>
    <title>KineticJS</title>
    <script src="./js/lib/kinetic-v5.1.0.js"></script>
</head>

<body>
    <script>
        var stage;
        function loadImage() {
            var image = new Image();
            image.onload = function() {
            var kimage = new Kinetic.Image({
                x : 100,
                y : 100,
                image : image,
                detectionType : "pixel"
            });
            //绑定事件响应方法
            kimage.on('click', function() {
                alert('image clicked');
            });
            var layer = new Kinetic.Layer();
            layer.add(kimage);
            stage.add(layer);
            //保存数据以相应事件
            kimage.saveData();
            };
            //图像需要与此页面在同一个服务器上，否则会Javascript会抛出安全异常
            image.src = './img/Footprint.png';
            }
            window.onload = function() {
                stage = new Kinetic.Stage({
                container : 'container',
                width : 600,
                height : 400
            });
            var rect = new Kinetic.Rect({
                x : 400,
                y : 100,
                width : 100,
                height : 100,
                fill : 'red',
                detectionType : 'pixel'
            });
            //绑定事件响应方法
            rect.on('click', function() {
            alert('rect clicked');
            });
            var layer = new Kinetic.Layer();
            layer.add(rect);
            stage.add(layer);
            //保存数据以相应事件
            rect.saveData();
            loadImage();
        };



            
            // var testLine1 = SoundLine.createNew([100, 50], 0);
            // var amplitude = 200;
            // var period = 2500;
            // var centerX = stage.getWidth() / 2;
            //动画帧定义方法
            // var anim = new Kinetic.Animation(function(frame) {
            //     circle.setX(amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX);
            //     // line.points(line.points().concat([73, frame.time/10]));
            // }, layer);
            //动画开始
            // anim.start();
            // testLine.runAway(layer);
            // testLine1.runAway(layer);
            // testLine1.stopRun();
            
                        // var config = {
            //         x : 300,
            //         y : 200,
            //         radius : 30,
            //         fill : "red",
            //         stroke : "black",
            //         strokeWidth : 5
            //     };
            // var circle = new Kinetic.Circle(config);



    </script>
    <div id='container'></div>
</body>

</html>

